<template>
  <div class="orderList">
    <el-form inline>
      <el-form-item label="订单号">
        <el-input type="text" width="100" size="large" v-model="orderNumber" placeholder="订单号" clearable/>
      </el-form-item>

      <el-form-item label="订单状态" clearable>
        <el-select v-model="value" size="large" placeholder="订单状态">
          <el-option
              v-for="item in option"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="下单时间">
        <el-date-picker
            size="large"
            style="width: 380px"
            v-model="value2"
            type="daterange"
            align="center"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions">
        </el-date-picker>
      </el-form-item>

      <el-form-item label="收货人">
        <el-input size="large" type="text" width="100" placeholder="收货人" v-model="consignee" clearable/>
      </el-form-item>

      <el-form-item label="收件电话">
        <el-input size="large" type="text" width="100" placeholder="收件人电话" v-model="consigneePhoto" clearable/>
      </el-form-item>

      <el-form-item label="收货人地址">
        <el-cascader
            size="large"
            :options="options"
            v-model="selectedOptions"
            >
        </el-cascader>
      </el-form-item>

      <el-form-item label="详细地址">
        <el-input type="text" size="large" width="150" v-model="address" placeholder="详细地址" clearable/>
      </el-form-item>

      <el-button size="large" type="primary" icon="el-icon-search">查询</el-button>
      <el-button size="large" type="default">清空</el-button>
    </el-form>
    <el-table :data="tableData" height="500" border style="width: 100%; margin-top: 60px; overflow:auto" v-infinite-scroll="load">
      <el-table-column prop="num" label="序号" width="50" align="center"></el-table-column>
      <el-table-column prop="number" label="订单号" align="center"></el-table-column>
      <el-table-column prop="pay" label="支付金额" align="center"></el-table-column>
      <el-table-column prop="name" label="收货人" align="center"></el-table-column>
      <el-table-column prop="address" label="收货人地址" align="center"></el-table-column>
      <el-table-column prop="creationTime" label="下单时间" align="center"></el-table-column>
      <el-table-column prop="expiryTime" label="签收时间" align="center"></el-table-column>
      <el-table-column prop="orderState" label="订单状态" align="center"></el-table-column>
      <el-table-column prop="handle" label="操作" align="center">
        <template slot-scope="">
          <el-button title="新增" size="mini" type="primary" icon="el-icon-plus" circle></el-button>
          <el-button title="查看" size="mini" type="success" icon="el-icon-view" circle></el-button>
          <el-button title="修改" size="mini" type="warning" icon="el-icon-edit" circle></el-button>
          <el-button title="删除" size="mini" type="danger" icon="el-icon-delete" circle></el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  import { regionDataPlus } from 'element-china-area-data'
  import api from "../../../../api/index.js";
  export default {
    name: "allOrderInquire",
    data () {
      return {
        options: regionDataPlus,
        selectedOptions: [],
        consignee: '',
        consigneePhoto: '',
        orderNumber: '',
        address: '',
        option:[
          {
            value: 'UNPAID',
            label: '未支付'
          },
          {
            value: 'WAIT',
            label: '待运输'
          },
          {
            value: 'DOING',
            label: '运输中'
          },
          {
            value: 'FINISH',
            label: '已签收'
          },
          {
            value: 'REFUND',
            label: '退款中'
          }
        ],
        value: '',
        tableData: [
          /*{
            num:1,
            number:1234567890,
            pay:123,
            name:"张三",
            address: "上海市松江区岳阳街道乐都路143弄11号米暨酒店公寓",
            creationTime:"2021年1月25日",
            expiryTime:"2021年1月26日",
            orderState:"运输中",
            handle:"操作"
          },
          {
            num:2,
            number:1234567890,
            pay:123,
            name:"张三",
            address: "上海市松江区岳阳街道乐都路143弄11号米暨酒店公寓",
            creationTime:"2021年1月25日",
            expiryTime:"2021年1月26日",
            orderState:"运输中",
            handle:"操作"
          },
          {
            num:3,
            number:1234567890,
            pay:123,
            name:"张三",
            address: "上海市松江区岳阳街道乐都路143弄11号米暨酒店公寓",
            creationTime:"2021年1月25日",
            expiryTime:"2021年1月26日",
            orderState:"运输中",
            handle:"操作"
          },
          {
            num:4,
            number:1234567890,
            pay:123,
            name:"张三",
            address: "上海市松江区岳阳街道乐都路143弄11号米暨酒店公寓",
            creationTime:"2021年1月25日",
            expiryTime:"2021年1月26日",
            orderState:"运输中",
            handle:"操作"
          },
          {
            num:5,
            number:1234567890,
            pay:123,
            name:"张三",
            address: "上海市松江区岳阳街道乐都路143弄11号米暨酒店公寓",
            creationTime:"2021年1月25日",
            expiryTime:"2021年1月26日",
            orderState:"运输中",
            handle:"操作"
          },
          {
            num:6,
            number:1234567890,
            pay:123,
            name:"张三",
            address: "上海市松江区岳阳街道乐都路143弄11号米暨酒店公寓",
            creationTime:"2021年1月25日",
            expiryTime:"2021年1月26日",
            orderState:"运输中",
            handle:"操作"
          },
          {
            num:7,
            number:1234567890,
            pay:123,
            name:"张三",
            address: "上海市松江区岳阳街道乐都路143弄11号米暨酒店公寓",
            creationTime:"2021年1月25日",
            expiryTime:"2021年1月26日",
            orderState:"运输中",
            handle:"操作"
          },
          {
            num:8,
            number:1234567890,
            pay:123,
            name:"张三",
            address: "上海市松江区岳阳街道乐都路143弄11号米暨酒店公寓",
            creationTime:"2021年1月25日",
            expiryTime:"2021年1月26日",
            orderState:"运输中",
            handle:"操作"
          }*/
        ],
        pickerOptions: {
          shortcuts: [
            {
              text: '最近一周',
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                picker.$emit('pick', [start, end]);
              }
            },
            {
              text: '最近一个月',
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                picker.$emit('pick', [start, end]);
              }
            },
            {
              text: '最近三个月',
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                picker.$emit('pick', [start, end]);
              }
            },
            {
              text: '一年内',
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 365);
                picker.$emit('pick', [start, end]);
              }
            }
          ]
        },
        value1: '',
        value2: '',
      }
    },
    created() {
      this.loadData();
    },
    methods: {
      loadData() {
        api.getList("/news/index").then((res) => {
          this.tableData = res.allOrders;
          console.log(res)
        });
      },
      load () {
        this.count += 2
      }
    }
  }
</script>

<style scoped lang="less">
  .orderList{
    padding: 0 20px;
  }
</style>
